import type {Contact} from "./Messenger";

const ContactList = ( {
	selectContact,
	contacts,
	onSelect
} : {
	selectContact : Contact,
	contacts : Contact[],
	onSelect : ( contact : Contact ) => void
} ) => {
	return (
		<section >
			<ul >
				{ contacts.map( contact =>
					<li key={ contact.email } >
						<button onClick={ () => onSelect( contact ) } >
							{ contact.name }{ selectContact.email === contact.email ? '✓' : '' }
						</button >
					</li >
				) }
			</ul >
		</section >
	);
}

export default ContactList;
export type { Contact };